<template>
  <div class="graph-wrapper">
    <div ref="noteGraphRef" id="noteGraph"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { httpGetNoteRelations } from '@/api/note'
import * as echarts from 'echarts/core'
import { TitleComponent, TooltipComponent } from 'echarts/components'
import { GraphChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { useRouter } from 'vue-router'
echarts.use([TitleComponent, TooltipComponent, GraphChart, CanvasRenderer])
const noteGraphRef = ref()
const myChart = ref()
const router = useRouter()
const formData = ref([
  //   {
  //     name: '笔记',
  //     // label: '笔记',
  //     // symbolSize: 30,
  //     // draggable: 'true',
  //     value: 1,
  //     id: '1',
  //     // symbol: 'image://' + doc2,
  //     //设置节点的样式
  //     symbolSize: 30,
  //     draggable: 'true',
  //     itemStyle: {
  //       color: 'pink',
  //       borderColor: '#cdd0d5',
  //       borderWidth: 1,
  //     },
  //   },
])
const links = ref([
  //   {
  //     source: '笔记',
  //     target: 'xmind',
  //   },
])
let option = ref({
  //   backgroundColor: echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
  //     {
  //       offset: 0,
  //       color: '#f7f8fa',
  //     },
  //     {
  //       offset: 1,
  //       color: '#cdd0d5',
  //     },
  //   ]),
  title: {
    top: 'top',
    left: 'center',
  },
  // animationDuration: 3000,
  // animationEasingUpdate: 'quinticInOut',
  series: [
    {
      type: 'graph',
      layout: 'force',
      edgeSymbol: ['none', 'arrow'], //arrow
      // 连线不是中心位置
      force: {
        repulsion: 400,
        edgeLength: 100,
        gravity: 0.1,
      },
      data: formData.value,
      links: links.value,
      categories: [
        // {
        //   name: '刘备2239',
        // },
      ],
      focusNodeAdjacency: true,
      roam: true,
      label: {
        normal: {
          show: true,
          position: 'bottom',
        },
      },
      lineStyle: {
        normal: {
          color: 'source',
        },
        curveness: 0.2,
      },
    },
  ],
})
function clickNode(params) {
  let { icon, id } = params.data
  if (icon === 'Document') {
    router.push('/file/doc/' + id)
  } else if (icon === 'Xmind') {
    router.push('/file/mindmap/' + id)
  } else if (icon === 'FlowChart') {
    router.push('/file/drawio/' + id)
  }
}
function observeWindowSize() {
  myChart.value.resize()
  myChart.value.setOption(option.value)
}
onMounted(() => {
  myChart.value = echarts.init(noteGraphRef.value)
  getRelations()
  option.value && myChart.value.setOption(option.value)
  // 为窗口大小变化添加监听事件
  window.addEventListener('resize', observeWindowSize)
  myChart.value.on('dblclick', clickNode)
})
onUnmounted(() => {
  // 移除窗口大小变化监听事件
  window.removeEventListener('resize', observeWindowSize)
})
const getRelations = async () => {
  const res = await httpGetNoteRelations()
  if (res) {
    formData.value = res.list[0].data.map((child) => {
      return {
        name: child.name_title,
        icon: child.icon,
        id: child.fd_id + '',
        symbolSize: 30,
        draggable: 'true',
        // itemStyle: {
        //   color: '',
        //   borderColor: '#cdd0d5',
        //   borderWidth: 1,
        // },
      }
    })
    links.value = res.list[0].links.map((x) => ({
      source: x.source + '',
      target: x.target + '',
      lineStyle: {
        width: 1,
        // curveness: 0.1,
      },
    }))
    option.value.series[0].data = formData.value
    option.value.series[0].links = links.value
    myChart.value.setOption(option.value)
  }
}
</script>
<style scoped lang="scss">
.graph-wrapper {
  height: 100vh;
  width: 100%;
  #noteGraph {
    height: 100%;
    width: 100%;
  }
}
</style>
